<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>First conditional example</title>
  </head>
  <body>
    <button>Start machine</button>
    <p>The machine is stopped.</p>
  </body>

  <script>
    const btn = document.querySelector('button');
    const txt = document.querySelector('p');

    btn.addEventListener('click', updateBtn);

    function updateBtn() {
      if(btn.textContent === 'Start machine') {
        btn.textContent = 'Stop machine';
        txt.textContent = 'The machine has started!';
      } else {
        btn.textContent = 'Start machine';
        txt.textContent = 'The machine is stopped.';
      }
    }
  </script>
</html>
